<template>
	<!-- 使用 page-meta 组件配合阻止滚动穿透 ,page-meta一定作为页面的第一个节点-->
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

	<uni-popup ref="settingPopup" type="bottom" @change="changePop" :safeArea="false" :isMaskClick="isMaskClick">
		<my-personal-obj-setting-pop :dataTree="fridge_structure" :obj="selected_item" @close="closeSettingPop"
			@popupclosed="popupclosed" @popupopened="popupopened">
		</my-personal-obj-setting-pop>
	</uni-popup>

	<view>
		<view class="search-box" style="position: sticky; top: 0;">
			<my-search :width="'95%'" @search="gotoSearch">
			</my-search>
		</view>
		<view class="store-list-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
				<block v-for="(item, i) in _cate_list" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
						{{item.classification}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="right-scroll-view" scroll-y :scroll-top="scrollTop"
				:style="{height: wh + 'px','width':'80%'}">

				<image src="../../../static/empty_img/obj_empty.png" style="width: 100%;margin-top: 30%;"
					mode="widthFix" v-if="cate_obj_list.length==0"></image>

				<view class="item-list">
					<view class="item-box" hover-class="hover-item-box" v-for="(item, index) in cate_obj_list"
						:key="item.otId" @click="selectItem(item,index)">
						<image :src="item.imgSrc" mode="heightFix"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				search_height: 60,
				wh: 0,
				// 当前选中项的索引，默认让第一项被选中
				active: 0,
				// 滚动条距离顶部的距离
				scrollTop: 0,
				// 选择的物资
				selected_item: {
					// 保质期
					warrantTime: 10,
					// 存放位置
					location: '1-1',
				},
				cate_obj_list: [],
				// 是否点击遮罩层关闭弹窗
				isMaskClick: true,
			};
		},
		computed: {
			...mapState('fridge', ['default_fridge', 'fridge_structure']),
			...mapState('object', ['cate_list']),
			_cate_list() {
				return this.cate_list.filter(({
					classification
				}) => classification != '识图')
			}
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值，减去搜索栏的高度
			this.wh = sysInfo.windowHeight - this
				.search_height
			this.activeChanged(0)
		},
		onPullDownRefresh() {
			uni.$api.object.getAllCateAndObj()
			setTimeout(() => {
				this.activeChanged(0)
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {

			// 跳转
			gotoSearch() {
				uni.navigateTo({
					url: '/pagesSub/pageSearch/obj_setting_search/obj_setting_search?mode=personal'
				})
			},

			// 事件处理
			// 选中项改变的事件处理函数
			activeChanged(i) {
				this.active = i
				// 让 scrollTop 的值在 0 与 1 之间切换
				this.scrollTop = this.scrollTop ? 0 : 1
				this.cate_obj_list = this._cate_list[i].objectTypeList
			},
			selectItem(obj) {
				this.selected_item = {
					...this.selected_item,
					...obj
				}
				if (obj.location != '1-1') {
					// 对设置了默认位置的物品进行映射
					let tempArr = obj.location.split('-')
					let temp = this.fridge_structure.find(({
						text
					}) => text == tempArr[0])
					this.selected_item.location = [{
						text: tempArr[0],
						value: temp.value
					}, {
						text: tempArr[1],
						value: temp.children.find(({
							text
						}) => text == tempArr[1]).value
					}]
				}
				this.$refs.settingPopup.open()
			},
			closeSettingPop(flag) {
				if (flag) {
					uni.showLoading({
						mask: true
					})
					setTimeout(() => {
						this.activeChanged(this.active)
						uni.hideLoading()
					}, 500)
				}
				this.$refs.settingPopup.close()
			},
			changePop(e) {
				this.show = e.show
			},
			// 处理双层弹窗的遮罩层响应问题
			popupopened(e) {
				this.isMaskClick = false
			},
			popupclosed(e) {
				this.isMaskClick = true
			},
		}
	}
</script>

<style lang="scss">
	.store-list-container {
		display: flex;

		.left-scroll-view {
			width: 20%;

			.left-scroll-view-item {
				line-height: 120rpx;
				background-color: #f2f3f5;
				text-align: center;
				font-size: 30rpx;

				// 激活项的样式
				&.active {
					background-color: #fff;
					color: #96c0fd;
					position: relative;

					// 渲染激活项左侧的指示边线
					&::before {
						content: ' ';
						display: block;
						width: 10rpx;
						height: 60rpx;
						background-color: #96c0fd;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.right-scroll-view {
			background-color: #efefef;
			width: 80%;

			.item-list {
				display: flex;
				flex-wrap: wrap;
				padding: 0 5%;
				justify-content: space-between;
				padding-top: 20rpx;

				.item-box {
					font-size: 36rpx;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					width: 47%;
					height: 250rpx;
					align-items: center;
					border-radius: 20rpx;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
					position: relative;

					>image {
						height: 220rpx;
						border-radius: 20rpx;
					}

					>text {
						position: absolute;
						width: 100%;
						text-align: center;
						bottom: 10rpx;
					}
				}

				.hover-item-box {
					background-color: #acacac;
				}
			}
		}
	}
</style>